<template>
  <div style=" width: 89.5vw;height: 93vh; background: rgba(255, 255, 255, 0.6);display: flex;flex-direction: row;justify-content: space-around;">
    <img src="../pic/homePage/v2_quu01i.jpg" style="object-fit: cover;z-index: -1;position: fixed;width: 100%;height: 100%;" />
    <!-- 左边一栏 -->
    <div style="margin-top: 10px; margin-left: 0.5vw;width: 20%;height: 100%;display: flex;flex-direction: column;">
      <!-- 今日热榜 -->
      <div class="smallFrame">
        <div class="smallFrame_title">今日热映</div>
        <div @click="todayHotBtn(index)" v-for="(src, index) in todayHot " :key="index" style=" width: 100%;height: 85%;display: flex;flex-direction: column;justify-content: space-around; ">
          <div v-if="index == 0" style="height: 80px;display: flex;flex-direction: row;align-items: center;">
            <div style="width: 120px;height: 100%;margin-left: 8px;">
              <img :src="todayHot[index].imageSrc" style="width: 100%;height: 100%;" />
            </div>
            <div style="margin-left: 30px; display: flex;flex-direction: column;justify-content: space-around;height: 80%;">
              <div style="font-size: 20px;color: rgb(16, 16, 16);">{{todayHot[index].name}}</div>
              <div style="font-size: 16px;color: rgba(248, 66, 68, 1);">{{todayHot[index].score}}</div>
            </div>
          </div>
          <div v-if="index != 0" style="height:30px ;display: flex;flex-direction: row;font-size: 16px;align-items: center;">
            <div style="margin-left: 8px;width: 5%; color: rgba(248, 66, 68, 1);">{{index+1}}</div>
            <div style="width: 70%; margin-left: 20px;">{{todayHot[index].name}}</div>
            <div style="margin-left: 5%;color: rgba(248, 66, 68, 1);">{{todayHot[index].score}}</div>
          </div>
          <hr style="width: 100%;" />
        </div>
      </div>
      <!-- 年度热榜 -->
      <div class="smallFramea" style="margin-top: 30px;">
        <div class="smallFrame_title">年度热榜</div>
        <div @click="yearHotBtn(index)" v-for="(src, index) in yearHot " :key="index" style=" width: 100%;height: 85%;display: flex;flex-direction: column;justify-content: space-around; ">
          <div v-if="index <= 2" style="height: 80px;display: flex;flex-direction: row;align-items: center;">
            <div style="margin-left: 8px;width: 10%; color: rgba(248, 66, 68, 1);font-size: 16px;">{{index+1}}</div>
            <div style="width: 100px;height: 100%;">
              <img :src="yearHot[index].imageSrc" style="width: 100%;height: 100%;border-radius: 50%;" />
            </div>
            <div style="margin-left: 30px; display: flex;flex-direction: column;justify-content: space-around;height: 80%;">
              <div style="font-size: 20px;color: rgb(16, 16, 16);">{{yearHot[index].name}}</div>
              <div style="font-size: 16px;color: rgba(248, 66, 68, 1);">{{yearHot[index].score}}</div>
            </div>
          </div>

          <div v-if="index >2" style="height:30px ;display: flex;flex-direction: row;font-size: 16px;align-items: center;">
            <div style="margin-left: 8px;width: 5%; color: rgba(248, 66, 68, 1);">{{index+1}}</div>
            <div style="width: 70%; margin-left: 20px;">{{yearHot[index].name}}</div>
            <div style="margin-left: 5%;color: rgba(248, 66, 68, 1);">{{yearHot[index].score}}</div>
          </div>
          <hr style="color: #36e3be; width: 100%;" />
        </div>
      </div>

    </div>
    <!-- 中间一栏 -->
    <div style="margin-top: 10px;width: 45%;height: 100%;display: flex;flex-direction: column;">
      <!-- 上面排行榜栏 -->
      <div style="display: flex;flex-direction: row;width: 100%;justify-content: space-around;height:35%;">
        <!-- 即将上映 -->
        <div class="smallFrameb" style="">
          <div class="smallFrame_title">即将上映</div>
          <div @click="commingBtn(index)" v-for="(src, index) in comming " :key="index" style=" width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-around; ">
            <div v-if="index == 0" style="height: 80px;display: flex;flex-direction: row;align-items: center;">
              <div style="width: 120px;height: 100%;margin-left: 8px;">
                <img :src="comming[index].imageSrc" style="width: 100%;height: 100%;" />
              </div>
              <div style="margin-left: 30px; display: flex;flex-direction: column;justify-content: space-around;height: 80%;">
                <div style="font-size: 20px;color: rgb(16, 16, 16);">{{comming[index].name}}</div>
                <div style="font-size: 10px;color: rgb(133, 133, 133);">上映时间{{comming[index].time}}</div>
                <div style="font-size: 12px;color: rgba(248, 66, 68, 1);">{{comming[index].num}}人想看</div>
              </div>
            </div>
            <div v-if="index != 0" style="height:30px ;display: flex;flex-direction: row;font-size: 16px;align-items: center;">
              <div style="margin-left: 8px;width: 5%; color: rgba(248, 66, 68, 1);">{{index+1}}</div>
              <div style="width: 50%; margin-left: 20px;">{{comming[index].name}}</div>
              <div style="font-size: 12px; margin-left: 5%;color: rgba(248, 66, 68, 1);">{{comming[index].num}}人想看</div>
            </div>
            <hr style="width: 100%;" />
          </div>
        </div>

        <!-- 周榜 -->
        <div class="smallFrameb" style="">
          <div class="smallFrame_title">周榜</div>
          <div @click="weekBtn(index)" v-for="(src, index) in weekHot " :key="index" style=" width: 100%;height: 85%;display: flex;flex-direction: column;justify-content: space-around; ">
            <div v-if="index == 0" style="height: 80px;display: flex;flex-direction: row;align-items: center;">
              <div style="margin-left: 8px;width: 120px;height: 100%;">
                <img :src="weekHot[index].imageSrc" style="width: 100%;height: 100%;" />
              </div>
              <div style="margin-left: 30px; display: flex;flex-direction: column;justify-content: space-around;height: 80%;">
                <div style="font-size: 20px;color: rgb(16, 16, 16);">{{weekHot[index].name}}</div>
                <div style="font-size: 16px;color: rgba(248, 66, 68, 1);">{{weekHot[index].score}}</div>
              </div>
            </div>
            <div v-if="index != 0" style="height:30px ;display: flex;flex-direction: row;font-size: 16px;align-items: center;">
              <div style="margin-left: 8px;width: 5%; color: rgba(248, 66, 68, 1);">{{index+1}}</div>
              <div style="width: 70%; margin-left: 20px;">{{weekHot[index].name}}</div>
              <div style="margin-left: 5%;color: rgba(248, 66, 68, 1);">{{weekHot[index].score}}</div>
            </div>
            <hr style="width: 100%;" />
          </div>
        </div>
      </div>

      <!-- 中间南丁格尔玫瑰图  导演演员饼状图 -->
      <div style="border-radius: 8px;background: rgba(255, 255, 255, 0.75);margin-top: 5%; width: 100%;height: 60%;display: flex;justify-content: center;align-items: center;">
        <div id="author" style="width: 100%;height: 100%;"></div>
      </div>

    </div>
    <!-- 右边一栏 -->
    <div style="margin-top: 10px;width: 30%;height: 100%;display: flex;flex-direction: column;">
      <!-- 上方推荐栏 -->
      <div style="width: 100%;height: 30%;border-radius: 8px;">
        <el-carousel height="230px">
          <el-carousel-item v-for="(src, index) in tjSrc" :key="index">
            <img @click="tjBtn(index)" style="width: 100%;height: 100%;border-radius: 8px;" :src="tjSrc[index].imgsrc" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 下方榜单 -->
      <div style="display: flex;flex-direction: column;justify-content: space-around; height: 67%;margin-top: 2%;background: rgba(255, 255, 255, 0.75);border-radius: 8px;">
        <!-- 搜索框 -->
        <div style="width: 100%;height: 10%;display: flex;flex-direction: row;margin-top: 2px;margin-left: 45%;">
          <el-select @change='sortChange' v-model="selectvalue" placeholder="请选择">
            <el-option v-for="item in selectoptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- 柱状图 -->
        <div style="width: 100%;height: 90%;">
          <div id="sort" style="width: 100%;height: 100%;"></div>
        </div>
      </div>

    </div>


    <!-- 弹框 -->
    <el-dialog width="800px" :visible.sync="dialogTableVisible">
      <div>
        <div style="width: 95%;display: flex;flex-direction: row;height: 280px;">
          <div style="margin-left: 40px;height: 100%;width: 30%;">
            <img style="width: 100%; height: 320px;" :src="movieSrc.imgSrc" />
          </div>
          <!-- 介绍内容 -->
          <div style="margin-left: 20px;height: 300px;display: flex;flex-direction: column;margin-top: 20px;">
            <div style="font-size: 28px;color: rgba(250, 106, 7, 1);">{{movieSrc.title}} </div>
            <div style="display: flex;flex-direction: row; margin-top: 10px;font-size: 20px;">
              <div v-for="(src,index) in movieSrc.range">
                <div style="color: #000000;margin-right: 10px;">{{movieSrc.range[index]}}</div>
              </div>
            </div>
            <div style="color: #000000; display: flex;flex-direction: row; margin-top: 10px;font-size: 20px;">
              {{movieSrc.direction}} / {{movieSrc.length}}分钟
            </div>
            <div style="color: #000000; display: flex;flex-direction: row; margin-top: 10px;font-size: 20px;">
              {{movieSrc.time}} 中国大陆上映
            </div>

            <div style="margin-top: 15px; display: flex;flex-direction: row;">
              <div style="display: flex;flex-direction: column;">
                <div style="font-size: 28px;color: rgb(50, 147, 200);">累计票房</div>
                <div style="display: flex;flex-direction: row;">
                  <div style="font-size: 28px;color: rgba(193, 1, 1, 1);margin-left: 15px;">{{movieSrc.allBoxoffice}}</div>
                  <div style="font-size: 20px;color: rgb(50, 147, 200);margin-top: 5px;margin-left: 3px;">万</div>
                </div>
              </div>

              <div style="display: flex;flex-direction: column; margin-left: 20px;">
                <div style="font-size: 28px;color: rgb(50, 147, 200);">猫眼口碑</div>
                <div style="font-size: 28px;color: rgba(193, 1, 1, 1);margin-left: 36px;">{{movieSrc.praise}}</div>
              </div>

              <div style="display: flex;flex-direction: column;margin-left: 23px;">
                <div style="margin-top: 14px;">
                  <el-rate v-model="movieSrc.score" disabled show-score text-color="#ff9900">
                  </el-rate>
                </div>
                <div style="margin-top: 7px;font-size: 16px;">{{movieSrc.personNum}}人参与评分</div>
              </div>
            </div>

          </div>
        </div>

        <div style="width: 100%;height:325rem; display: flex;flex-direction: column;border: 1px solid rgb(187, 187, 187); border-radius: 4px;background-color: rgba(245, 245, 245, 0.45);">
          <!-- 剧情简介 -->
          <div class='dialog_IandT' style="margin-top: 60px;">
            <div class="dialog_Img1">
              <img class="dialog_Img2" src="../pic/homePage/fa-film.svg" />
            </div>
            <div class="dialog_Text">剧情简介</div>
          </div>
          <div style="width: 90%; margin-top: 10px; margin-left: 20px;font-size: 20px;color: rgba(16, 16, 16, 0.85);">
            {{movieSrc.introduction}}
          </div>
          <!-- 演员介绍 -->
          <div class='dialog_IandT'>
            <div class="dialog_Img1">
              <img class="dialog_Img2" src="../pic/homePage/actor.png" />
            </div>
            <div class="dialog_Text">演职人员</div>
          </div>
          <!-- 演员图片 -->
          <div style="width: 90%; margin-top: 10px; margin-left: 20px;display: flex;flex-direction: row;">
            <div style="width: 160px;height: 210px; display: flex;flex-direction: column;" v-for="(src, index) in movieSrc.actorSrc"
              :key="index">
              <div style="width:100% ;height:70% ;display: flex;justify-content: center;align-items: center;">
                <img style="width: 80%;height: 100%;" :src="movieSrc.actorSrc[index].imgSrc" />
              </div>
              <div style="margin-top: 5px; font-size: 20px;color: #000000; display: flex;justify-content: center;align-items: center;">{{movieSrc.actorSrc[index].name}}</div>
              <div style="margin-top: 5px;font-size: 16px; display: flex;justify-content: center;align-items: center;">饰{{movieSrc.actorSrc[index].roleName}}</div>
            </div>
            <div style="width: 50px;height: 160px;display: flex;justify-content: center;align-items: center;">
              <img src="../pic/homePage/fa5-ellipsis-h.svg" />
            </div>

          </div>

          <!-- 票房排行 -->
          <div class='dialog_IandT'>
            <div class="dialog_Img1">
              <img class="dialog_Img2" src="../pic/homePage/antOutline-line-chart@1x.png" />
            </div>
            <div class="dialog_Text">票房</div>
          </div>

          <!-- 票房显示图 -->
          <div style="margin-top: 20px; width: 95%;display:flex;justify-content: center;flex-direction: row;">
            <div style="display: flex;justify-content: center; width: 80%;height: 100px;border: 1px solid rgb(187, 187, 187);border-radius: 8px;background-color: rgba(232, 232, 232, 0.41);">
              <div style="width: 90%;display: flex;flex-direction: row;justify-content: space-around;">
                <div style="width:23%;display: flex;flex-direction: column;">
                  <div style="margin-top: 15px; color: rgba(248, 66, 68, 1);font-size: 30px;display: flex;justify-content: center;">{{movieSrc.ranking}}</div>
                  <div style="margin-top: 5px;color: rgba(91, 91, 91, 1);font-size: 18px;display: flex;justify-content: center;">昨日排名</div>
                </div>

                <div style="width:23%;display: flex;flex-direction: column;">
                  <div style="margin-top: 15px;color: rgba(248, 66, 68, 1);font-size: 30px;display: flex;justify-content: center;">{{movieSrc.firstWeekend}}</div>
                  <div style="margin-top: 7px;color: rgba(91, 91, 91, 1);font-size: 18px;display: flex;justify-content: center;">首周票房</div>
                </div>

                <div style="width:23%;display: flex;flex-direction: column;">
                  <div style="margin-top: 15px;color: rgba(248, 66, 68, 1);font-size: 30px;display: flex;justify-content: center;">{{movieSrc.allBoxoffice}}</div>
                  <div style="margin-top: 7px;color: rgba(91, 91, 91, 1);font-size: 18px;display: flex;justify-content: center;">累计票房</div>
                </div>
              </div>


            </div>
          </div>

          <!-- 票房折线图 -->
          <div style="margin-top: 20px; width: 95%;display:flex;justify-content: center;flex-direction: row;">
            <div style="display: flex;justify-content: center; width: 80%;height: 300px;border: 1px solid rgb(187, 187, 187);border-radius: 8px;background-color: rgba(232, 232, 232, 0.41);">
              <div id="pfZXT" style="width: 600px;height: 300px;"></div>
            </div>
          </div>
          <!-- 评分 -->
          <div class='dialog_IandT'>
            <div class="dialog_Img1">
              <img class="dialog_Img2" src="../pic/homePage/antOutline-pie-chart@1x.png" />
            </div>
            <div class="dialog_Text">评分</div>
          </div>

          <div style="margin-top: 20px; width: 100%;display: flex;flex-direction: row;justify-content: center;">
            <div id="ndge_score" style="width: 400px;height: 300px;"></div>
          </div>

          <!-- 热门评论 -->
          <div class='dialog_IandT'>
            <div class="dialog_Img1">
              <img class="dialog_Img2" src="../pic/homePage/fa-comment@1x.png" />
            </div>
            <div class="dialog_Text">热门评论</div>
          </div>

          <div style="margin-top: 20px; width: 100%;height: auto;display: flex;flex-direction: column;">
            <div v-for="(src, index) in movieSrc.comments" :key="index" style="margin-left: 5%; width: 90%;display: flex;flex-direction: column;justify-content: center;">
              <!-- 头像以及会员信息 -->
              <div style="display: flex;flex-direction: row;height: 100px;align-items: center;">
                <div style="width: 100px;height: 100px;display: flex;justify-content: center;align-items: center;">
                  <img :src="movieSrc.comments[index].imgSrc" style="width: 80%;height: 80%;border-radius: 50%;" />
                </div>
                <div style="width: 30%; margin-left: 20px;height: 70%;display: flex;flex-direction: column;justify-content: space-around;">
                  <div style="font-size: 18px;color: black;">{{movieSrc.comments[index].name}}</div>
                  <div style="">
                    <el-rate v-model="movieSrc.comments[index].score" disabled show-score text-color="#ff9900">
                    </el-rate>
                  </div>
                </div>
                <!-- 点赞 -->
                <div style="margin-left: 40%;;height: 50%;display: flex;flex-direction: column;justify-content:space-around;">
                  <div>
                    <img style="width: 30px;height: 30px;" src="../pic/homePage/ze-good-job-o.svg" />
                  </div>
                  <div style="font-size: 13px;color: #4e504c;">{{movieSrc.comments[index].num}}</div>
                </div>
              </div>
              <!-- 评论内容 -->
              <div style="margin-top: 10px; font-size: 16px;color: black;">{{movieSrc.comments[index].message}}</div>
              <div style="display: flex;width: 100%;flex-direction: row;">
                <hr width="100%" />
              </div>
            </div>
            <!-- <div style="margin-top: 20px; width: 100%;display: flex;flex-direction: row;justify-content: center;">
              <div style="color: #0011ff;">展示更多评论</div>
            </div> -->
          </div>


          <!-- <img src="../pic/homePage/$1MHP6TBUK)_KBA%5D0HN6YDL.png" /> -->
        </div>

      </div>
    </el-dialog>


  </div>



  <!-- <img src="../pic/homePage/sdr.png" /> -->
</template>

<script>
  import axios from 'axios';
  import * as echarts from "echarts";
  import $ from 'jquery'; //在需要使用的页面中
  export default {
    data() {
      return {
        starORdirtvalue: false,
        url:'http://106.13.117.37:8000',
        dialogTableVisible: false, //弹框标志位
        todayHot: [{
            name: '',
            imageSrc: '',
            score: '',
          },
          {
              name: '',
              imageSrc: '',
              score: '',
            },
          {
              name: '',
              imageSrc: '',
              score: '',
            },
          {
              name: '',
              imageSrc: '',
              score: '',
            },

        ],
        yearHot: [{
            name: '',
            imageSrc: '',
            score: '',
          },
          {
              name: '',
              imageSrc: '',
              score: '',
            },
          {
              name: '',
              imageSrc: '',
              score: '',
            },
          {
              name: '',
              imageSrc: '',
              score: '',
            },
          {
              name: '',
              imageSrc: '',
              score: '',
            },
        ],
        weekHot: [{
            name: '守岛人',
            imageSrc: require('../pic/homePage/sdr.png'),
            score: 9.0,
          },
          {
            name: '了不起的爸爸',
            imageSrc: require('../pic/homePage/v2_qupynn.jpg'),
            score: 8.9,
          },
          {
            name: '阳光姐妹淘',
            imageSrc: require('../pic/homePage/v2_qupynn.jpg'),
            score: 8.2,
          },
          {
            name: '黑白魔女库伊拉',
            imageSrc: require('../pic/homePage/v2_qupynn.jpg'),
            score: 8.1,
          },

        ],
        comming: [{
            name: '',
            imageSrc: '',
            time: '',
            num: '',
          },
          {
              name: '',
              imageSrc: '',
              time: '',
              num: '',
            },
          {
              name: '',
              imageSrc: '',
              time: '',
              num: '',
            },
          {
              name: '',
              imageSrc: '',
              time: '',
              num: '',
            },

        ],
        authordata: [{
            value: 40,
            name: 'rose 1'
          },
          {
            value: 38,
            name: 'rose 2'
          },
          {
            value: 32,
            name: 'rose 3'
          },
          {
            value: 30,
            name: 'rose 4'
          },
          {
            value: 28,
            name: 'rose 5'
          },
          {
            value: 26,
            name: 'rose 6'
          },
          {
            value: 22,
            name: 'rose 7'
          },
          {
            value: 18,
            name: 'rose 8'
          }
        ],
        // 推荐栏图片
        tjSrc: [{
            title: '1',
            imgsrc: require('../pic/homePage/v2_qupynn.jpg')
          },
          {
            title: '2',
            imgsrc: require('../pic/homePage/v2_qupynn.jpg')
          },
          {
            title: '3',
            imgsrc: require('../pic/homePage/v2_qupynn.jpg')
          },
          {
            title: '4',
            imgsrc: require('../pic/homePage/v2_qupynn.jpg')
          },
          {
            title: '5',
            imgsrc: require('../pic/homePage/v2_qupynn.jpg')
          },
        ],
        // 选择框内容
        selectvalue: '剧情',
        selectoptions: [{
            value: '爱情',
            label: '爱情'
          }, {
            value: '战争',
            label: '战争'
          }, {
            value: '冒险',
            label: '冒险'
          }, {
            value: '传记',
            label: '传记'
          }, {
            value: '奇幻',
            label: '奇幻'
          },{
            value: '悬疑',
            label: '悬疑'
          }, {
            value: '科幻',
            label: '科幻'
          }, {
            value: '剧情',
            label: '剧情'
        }],
        //票房排行榜
        sortSrc: {
          keys: [],
          values: [],
        },



        movieSrc: {
          title: '', //电影名称
          imgSrc: '', //电影封面图
          range: [], //电影类型
          direction: '', //地方
          length: '', //电影时长
          time: '', //上映时间
          boxoffice: '', //累计票房
          praise: '', //猫眼口碑得分
          score: '', //得分（五分制，如果是10分，除以2就行）
          personNum: '', //评分人数
          //电影简介
          introduction: '',
          ranking: '', //票房排名
          firstWeekend: '', //首周票房
          allBoxoffice: '', //累计票房
          boxofficeExchange: [820, 932, 901, 934, 1290, 1330, 1320], //最近一周的票房变化
          score_perstange: [
            { //评分占比，就是5分的占多少，4分的占多少
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            },
          ],
          actorSrc: [ //主要演职人员信息
            {
              name: '',
              imgSrc: '',
              roleName: ''
            },
            {
              name: '',
              imgSrc: '',
              roleName: ''
            },
           {
             name: '',
             imgSrc: '',
             roleName: ''
           },
            {
              name: '',
              imgSrc: '',
              roleName: ''
            },
            {
              name: '',
              imgSrc: '',
              roleName: ''
            },
            {
              name: '',
              imgSrc: '',
              roleName: ''
            },
          ],
          comments: [ //评论基本信息
            {
              name: '', //评论人名称
              imgSrc: '', //头像
              score: '', //评分
              num: '', //评论点赞人数
              message: '', //评论内容
            },
            {
              name: '', //评论人名称
              imgSrc: '', //头像
              score: '', //评分
              num: '', //评论点赞人数
              message: '', //评论内容
            },
            {
              name: '', //评论人名称
              imgSrc: '', //头像
              score: '', //评分
              num: '', //评论点赞人数
              message: '', //评论内容
            },
            {
              name: '', //评论人名称
              imgSrc: '', //头像
              score: '', //评分
              num: '', //评论点赞人数
              message: '', //评论内容
            },
            {
              name: '', //评论人名称
              imgSrc: '', //头像
              score: '', //评分
              num: '', //评论点赞人数
              message: '', //评论内容
            },
          ],

        },
      }
    },
    mounted() {
      this.drawNdge(this.$data.authordata)
      this.drawSort(this.$data.sortSrc)
      this.get_today_rank()
      this.get_year_rank()
      this.get_comming_rank()
      this.getTop50('2020-07',30,this.$data.dialogTableVisible)
      this.get_allkind_rank(this.$data.selectvalue)
      this.get_recommend('攀登者')
    },
    methods: {
      get_allkind_rank(kind){//获取各种类的票房排行
        let vue = this;
        console.log("获取各种类的电影排行")
        vue.$data.sortSrc.keys = []
        vue.$data.sortSrc.values = []
        axios.get(vue.$data.url + '/api/v1/movie/getkind')
          .then(response => {
            if (response.data.msg == 'success') {
              console.log("获取各种类的电影排行")
              console.log(response)
              for(let i = 0;i <=8;i++){
                if(kind == response.data.res[i].name){
                  for(let j = 0;j < 10;j++){
                    console.log(response.data.res[i].movieinfo[j].name)
                    console.log(response.data.res[i].movieinfo[j].sell)
                    vue.$data.sortSrc.keys.push(response.data.res[i].movieinfo[j].name)
                    vue.$data.sortSrc.values.push(response.data.res[i].movieinfo[j].sell)
                  }
                }
              }
              this.drawSort(this.$data.sortSrc)
              //vue.$data.phSrc = response.data.res
            } else {
              console.error("获取机器列表失败")
            }
          })
      },
      get_comming_rank(){//获取将要观看电影
        let vue = this;
        console.log("获取将要观看电影")
        axios.get(vue.$data.url + '/api/v1/movie/unplay')
          .then(response => {
            if (response.data.msg == 'success') {
              console.log("获取将要观看电影")
              console.log(response)
              for (let i = 0; i < 4; i++) {
                vue.$data.comming[i].imageSrc = response.data.res[i].movie_img
                vue.$data.comming[i].name = response.data.res[i].movie_name
                vue.$data.comming[i].time = response.data.res[i].movie_time
                vue.$data.comming[i].num = response.data.res[i].movie_desire
              }
              //vue.$data.phSrc = response.data.res
            } else {
              console.error("获取机器列表失败")
            }
          })
      },
      get_year_rank(){//获取年度票房排行
        let vue = this;
        console.log("获取年度票房排行")
        axios.get(vue.$data.url + '/api/v1/movie/homepage')
          .then(response => {
            if (response.data.msg == 'success') {
              console.log("获取年度票房排行")
              console.log(response)
              for (let i = 0; i <= 4; i++) {
                vue.$data.yearHot[i].imageSrc = response.data.res.year[i].image
                vue.$data.yearHot[i].name = response.data.res.year[i].name
                vue.$data.yearHot[i].score = response.data.res.year[i].rank
              }
              //vue.$data.phSrc = response.data.res
            } else {
              console.error("获取机器列表失败")
            }
          })
      },
      get_today_rank() { //获取今日票房前五的电影
        let vue = this;
        console.log("获取今日票房排行")
        axios.get(vue.$data.url + '/api/v1/movie/today_top5')
          .then(response => {
            if (response.data.msg == 'success') {
              console.log("获取今日票房排行")
              console.log(response)
              for (let i = 0; i < 4; i++) {
                vue.$data.todayHot[i].imageSrc = response.data.res[i].image
                vue.$data.todayHot[i].name = response.data.res[i].name
                vue.$data.todayHot[i].score = response.data.res[i].score
              }
              //vue.$data.phSrc = response.data.res
            } else {
              console.error("获取机器列表失败")
            }
          })
      },
      get_recommend(movieName){//获取推荐电影
        let vue = this;
        console.log("获取推荐电影")
        axios.get(vue.$data.url + '/api/v1/movie/recommand?key='+movieName)
          .then(response => {
            if (response.data.msg == 'success') {
              console.log("获取推荐电影")
              console.log(response)
              for (let i = 0; i < 10; i++) {
                vue.$data.tjSrc[i].title = response.data.res[i].movie_name
                vue.$data.tjSrc[i].imgsrc  = response.data.res[i].movie_img

              }
              //vue.$data.phSrc = response.data.res
            } else {
              console.error("获取机器列表失败")
            }
          })
      },
      todayHotBtn(i) {
        console.log('点击了今日热榜' + i)
        this.$data.dialogTableVisible = true
        this.get_movieSrc(this.$data.todayHot[i].name)
      },
      yearHotBtn(i) {
        console.log('点击了年度热榜' + i)
        this.$data.dialogTableVisible = true
        this.get_movieSrc(this.$data.yearHot[i].name)
      },
      commingBtn(i) { //将要上映的电影榜单按钮
        console.log('点击了将要上映热榜' + i)
        this.$data.dialogTableVisible = true
        this.get_movieSrc(this.$data.comming[i].name)
      },
      weekBtn(i){
        console.log('点击了周榜' + i)
        this.$data.dialogTableVisible = true
        this.get_movieSrc(this.$data.weekHot[i].name)
      },
      tjBtn(index) { //推荐按钮
        console.log(index)
        console.log("点击的电影名称为：" + this.$data.tjSrc[index].title)
        this.get_movieSrc(this.$data.tjSrc[index].title)
        this.$data.dialogTableVisible = true

      },
      //搜索框，返回
      sortChange(){
        console.log('搜索了'+this.$data.selectvalue)
        this.get_allkind_rank(this.$data.selectvalue)
      },
      protract() { //加载框中的图表绘制
        this.pfzxt(this.$data.movieSrc.boxofficeExchange)
        this.ndge_Score(this.$data.movieSrc.score_perstange)
      },
      //导演与演员
      starORdirt() {
      	console.log("点击了导演与演员！！" + this.$data.starORdirtvalue)
      	this.getTop50(this.$data.value, 30, this.$data.starORdirtvalue);
      	this.cloud(this.$data.cloudMsg)
      },
      //获取top50导演明星
      getTop50(time, num, starORdirtvalue) {
      	let vue = this;
      	axios.get('http://47.93.220.108:8000/api/v1/movie/top50', {
      			params: {
      				date: time,
      				num: num,
      			}
      		})
      		.then(response => {
      			if (response.data.msg == 'success') {

      				console.log("获取top50成功")
      				console.log(response)
      				if (starORdirtvalue == false) {

      					this.drawNdge(response.data.res.star.slice(0, 14))
      				}
      				if (starORdirtvalue == true) {


      					this.drawNdge(response.data.res.dir.slice(0, 14))
      				}

      			} else {
      				console.error("获取机器列表失败")
      			}
      		})
      },

      drawSort(data) { //主页面上的，票房排行榜
        echarts.init(document.getElementById("sort")).setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          title: {
                  text: '该种类电影排行榜',
                  subtext: '数据来自网络'
              },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.1]
          },
          yAxis: {
            type: 'category',
            //data: Object.keys(data)
            data: data.keys
          },
          series: {
            type: 'bar',
            //data: Object.values(data)
            data: data.values
          },
        })
      },
      pfzxt(data) { //票房折线图，是在弹框里面的
        echarts.init(document.getElementById("pfZXT")).setOption({
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: data,
            type: 'line',
            smooth: true
          }]
        })
      },
      ndge_Score(data) { //弹框里面的
        echarts.init(document.getElementById("ndge_score")).setOption({
          legend: {
            top: 'bottom'
          },
          series: [{
            name: '面积模式',
            type: 'pie',
            radius: [10, 110],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            data: data,
          }]
        })
      },
      drawNdge(data) { //主页面上的，南丁格尔图
        echarts.init(document.getElementById("author")).setOption({
          title: {
            text: '明星票房排行',
          },
          legend: {
            top: 'bottom'
          },
          grid: {
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },

          series: [{
            name: '面积模式',
            type: 'pie',
            radius: [20, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 6
            },
            data: data
          }]
        });
      },
      get_movieSrc(movieName){//获取电影详细信息
        console.log("获取该电影的所有信息")
        let vue = this;

        axios.get(vue.$data.url+'/api/v1/movie/detail_movie?name='+movieName)
        	.then(response => {
        		if (response.data.msg == 'success') {
        			console.log("获取该电影的所有信息")
        			console.log(response)
              vue.$data.movieSrc.title = response.data.res.title
              vue.$data.movieSrc.imgSrc = response.data.res.imgSrc
              vue.$data.movieSrc.length = response.data.res.length
              vue.$data.movieSrc.time = response.data.res.time
              //累计票房

              let x1 = Math.ceil(response.data.res.allBoxoffice)/10000
              var ss1 = x1.toString()
              if(ss1.length>=6){
                vue.$data.movieSrc.allBoxoffice = ss1.substring(0,6)
              }else{
                vue.$data.movieSrc.allBoxoffice = ss1.substring
              }
              vue.$data.movieSrc.praise='8.8'
              vue.$data.movieSrc.score = response.data.res.score/2
              vue.$data.movieSrc.personNum = response.data.res.personNum
              vue.$data.movieSrc.introduction = response.data.res.introduction
              vue.$data.movieSrc.direction = response.data.res.direction
              //vue.$data.movieSrc.firstWeekend = response.data.res.firstWeekend
              let x2 = Math.ceil(response.data.res.firstWeekend)/10000
              var ss2 = x2.toString()
              vue.$data.movieSrc.firstWeekend = ss2.substring(0,6)
              vue.$data.movieSrc.ranking = response.data.res.ranking
              for(let i = 0;i < response.data.res.actorSrc.length;i++){
                vue.$data.movieSrc.actorSrc[i].name = response.data.res.actorSrc[i].movie_star_name.replace(/\s[\x00-\xff]*/g,'')
                vue.$data.movieSrc.actorSrc[i].imgSrc = response.data.res.actorSrc[i].movie_star_img
                vue.$data.movieSrc.actorSrc[i].roleName = response.data.res.actorSrc[i].movie_star_role
              }
              for(let i = 0;i < response.data.res.comments.length;i++){
                vue.$data.movieSrc.comments[i].name = response.data.res.comments[i].movie_comment_person_name
                vue.$data.movieSrc.comments[i].score = response.data.res.comments[i].movie_comment_person_score/10
                vue.$data.movieSrc.comments[i].imgSrc = response.data.res.comments[i].movie_comment_person_img
                vue.$data.movieSrc.comments[i].num = response.data.res.comments[i].movie_comment_thumb
                vue.$data.movieSrc.comments[i].message = response.data.res.comments[i].movie_comment
              }
              for(let i = 0;i < response.data.res.score_perstange.length;i++){
                vue.$data.movieSrc.score_perstange[i].name = response.data.res.score_perstange[i].name
                vue.$data.movieSrc.score_perstange[i].value = response.data.res.score_perstange[i].value.match(/(\S*)%/)[1]
                console.log(response.data.res.score_perstange[i].value.match(/(\S*)%/)[1])
              }
              console.log(vue.$data.movieSrc.score_perstange)
              vue.ndge_Score(vue.$data.movieSrc.score_perstange)
              vue.$data.movieSrc.range = []
              for(let i = 0;i < response.data.res.range.length;i++){
                vue.$data.movieSrc.range.push(response.data.res.range[i])
              }
              this.pfzxt(vue.$data.movieSrc.boxofficeExchange)

        		} else {
        			console.error("获取机器列表失败")
        		}
        	})
      },
    },
  }
</script>

<style>
  .smallFrame {
    height: 35%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
  }

  .smallFramea {
    height: 60%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
  }

  .smallFrameb {
    height: 100%;
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
  }

  .smallFrame_title {
    font-family: FZZongYi;
    font-weight: 400;
    font-size: 24px;
    color: rgb(199, 7, 7);
    font-style: normal;
    margin-bottom: 10px;
    margin-left: 8px;
    margin-top: 5px;
  }
</style>
